<%- include('../components/head.ejs'); %>
<style>
    body {
        padding-top: 3.375rem;
        color: #6c757d;
    }

    @media (min-width: 992px) {
        body {
            padding-top: 0;
            padding-left: 17rem;
        }
    }
    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        text-transform: uppercase;
    }

    h1 {
        line-height: 1;
    }

    p.lead {
        font-size: 1.15rem;
        font-weight: 400;
    }

    .subheading {
        font-family: "Saira Extra Condensed", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
        text-transform: uppercase;
        font-weight: 500;
        font-size: 1.5rem;
    }

    #sideNav .navbar-nav .nav-item .nav-link {
        font-weight: 800;
        letter-spacing: 0.05rem;
        text-transform: uppercase;
    }
    #sideNav .navbar-toggler:focus {
        outline-color: #d48a6e;
    }

    @media (min-width: 992px) {
        #sideNav {
            text-align: center;
            position: fixed;
            top: 0;
            left: 0;
            display: flex;
            flex-direction: column;
            width: 17rem;
            height: 100vh;
        }
        #sideNav .navbar-brand {
            display: flex;
            margin: auto auto 0;
            padding: 0.5rem;
        }
        #sideNav .navbar-brand .img-profile {
            max-width: 10rem;
            max-height: 10rem;
            border: 0.5rem solid rgba(255, 255, 255, 0.2);
        }
        #sideNav .navbar-collapse {
            display: flex;
            align-items: flex-start;
            flex-grow: 0;
            width: 100%;
            margin-bottom: auto;
        }
        #sideNav .navbar-collapse .navbar-nav {
            flex-direction: column;
            width: 100%;
        }
        #sideNav .navbar-collapse .navbar-nav .nav-item {
            display: block;
        }
        #sideNav .navbar-collapse .navbar-nav .nav-item .nav-link {
            display: block;
        }
    }
    .social-icons .social-icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        height: 3.5rem;
        width: 3.5rem;
        background-color: #495057;
        color: #fff;
        border-radius: 100%;
        font-size: 1.5rem;
        margin-right: 1.5rem;
    }
    .social-icons .social-icon:last-child {
        margin-right: 0;
    }
    .social-icons .social-icon:hover {
        background-color: #bd5d38;
    }

    section.resume-section {
        display: flex;
        align-items: center;
        padding-left: 1rem;
        padding-right: 1rem;
        padding-top: 5rem;
        padding-bottom: 5rem;
        max-width: 75rem;
    }
    section.resume-section .resume-section-content {
        width: 100%;
    }

    @media (min-width: 768px) {
        section.resume-section {
            min-height: 100vh;
        }
    }
    @media (min-width: 992px) {
        section.resume-section {
            padding-left: 3rem;
            padding-right: 3rem;
            padding-top: 5rem;
            padding-bottom: 5rem;
        }
    }
    .fa-ul {
        list-style-type: none;
        margin-left: 2.5em;
        padding-left: 0;
    }
    .fontawesome-icon {
        display: inline-block;
        font-size: inherit;
        height: 1em;
        overflow: visible;
        vertical-align: -.125em;
        width: 1.125em;
    }
</style>
<body id="page-top">
<!-- Navigation-->
<nav class="navbar navbar-expand-lg navbar-dark bg-primary fixed-top" id="sideNav">
    <a class="navbar-brand js-scroll-trigger" href="/login">
        <span class="d-block d-lg-none"><%= name %></span>
        <span class="d-none d-lg-block"><img class="img-fluid img-profile rounded-circle mx-auto mb-2" src="<%= avatar || '/uploads/avatar_placeholder.png' %>" alt="<%= name %>" /></span>
    </a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav">
            <li class="nav-item"><a class="nav-link js-scroll-trigger" href="#about">关于我</a></li>
            <% if (experience.length) { %>
            <li class="nav-item"><a class="nav-link js-scroll-trigger" href="#experience">工作经历</a></li>
            <% } %>
            <% if (education.length) { %>
            <li class="nav-item"><a class="nav-link js-scroll-trigger" href="#education">教育经历</a></li>
            <% } %>
            <% if (skills.length) { %>
            <li class="nav-item"><a class="nav-link js-scroll-trigger" href="#skills">技能描述</a></li>
            <% } %>
            <% if (interests.length) { %>
            <li class="nav-item"><a class="nav-link js-scroll-trigger" href="#interests">兴趣爱好</a></li>
            <% } %>
            <% if (awards.length) { %>
            <li class="nav-item"><a class="nav-link js-scroll-trigger" href="#awards">荣誉证书</a></li>
            <% } %>
        </ul>
    </div>
</nav>
<!-- Page Content-->
<div class="container-fluid p-0">
    <!-- About-->
    <section class="resume-section" id="about">
        <div class="resume-section-content">
            <h1 class="mb-0">
                <%= name %>
                <span class="text-primary">（<%= position %>）</span>
            </h1>
            <div class="subheading mb-5">
                地址：<%= address %> · 手机：<%= phone %> ·
                邮编：<a href="mailto:<%= email %>"><%= email %></a>
            </div>
            <p class="lead mb-5"><%= introduce %></p>
            <div class="social-icons">
                <% if (blogUrl) { %>
                    <a class="social-icon" href="<%= blogUrl %>">博客</a>
                <% } %>
                <% if (weiboUrl) { %>
                    <a class="social-icon" href="<%= weiboUrl %>">微博</a>
                <% } %>
                <% if (zhihuUrl) { %>
                    <a class="social-icon" href="<%= zhihuUrl %>">知乎</a>
                <% } %>
            </div>
        </div>
    </section>
    <hr class="m-0" />
    <!-- Experience-->
    <% if (experience.length) { %>
    <section class="resume-section" id="experience">
        <div class="resume-section-content">
            <h2 class="mb-5">工作经历</h2>
            <% experience.forEach((item, idx) => { %>
                <div class="d-flex flex-column flex-md-row justify-content-between <%= idx < experience.length - 1 ? 'mb-5' : '' %>">
                    <div class="flex-grow-1">
                        <h3 class="mb-0"><%= item.title %></h3>
                        <div class="subheading mb-3"><%= item.byline %></div>
                        <% item.descriptions.forEach((desc) => { %>
                            <p><%= desc %></p>
                        <% }) %>
                    </div>
                    <div class="flex-shrink-0"><span class="text-primary"><%= item.duration %></span></div>
                </div>
            <% }) %>
        </div>
    </section>
    <hr class="m-0" />
    <% } %>
    <!-- Education-->
    <% if (education.length) { %>
    <section class="resume-section" id="education">
        <div class="resume-section-content">
            <h2 class="mb-5">教育经历</h2>
            <% education.forEach((item, idx) => { %>
            <div class="d-flex flex-column flex-md-row justify-content-between <%= idx < education.length - 1 ? 'mb-5' : '' %>">
                <div class="flex-grow-1">
                    <h3 class="mb-0"><%= item.title %></h3>
                    <div class="subheading mb-3"><%= item.byline %></div>
                    <div><%= item.major %></div>
                    <% item.descriptions.forEach((desc) => { %>
                    <p><%= desc %></p>
                    <% }) %>
                </div>
                <div class="flex-shrink-0"><span class="text-primary">August 2006 - May 2010</span></div>
            </div>
            <% }) %>
        </div>
    </section>
    <hr class="m-0" />
    <% } %>
    <!-- Skills-->
    <% if (skills.length) { %>
    <section class="resume-section" id="skills">
        <div class="resume-section-content">
            <h2 class="mb-5">技能描述</h2>
            <% skills.forEach((item, idx) => { %>
            <div class="subheading mb-3"><%= item.title %></div>
            <ul class="fa-ul <%= idx < skills.length - 1 ? 'mb-5' : 'mb-0' %>">
                <% item.descriptions.forEach((desc) => { %>
                <li>
                    <svg class="fontawesome-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!-- Font Awesome Free 5.15.4 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) --><path fill="currentColor" d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"/></svg>
                    <%= desc %>
                </li>
                <% }) %>
            </ul>
            <% }) %>
        </div>
    </section>
    <hr class="m-0" />
    <% } %>
    <!-- Interests-->
    <% if (interests.length) { %>
    <section class="resume-section" id="interests">
        <div class="resume-section-content">
            <h2 class="mb-5">兴趣爱好</h2>
            <% interests.forEach((desc, idx) => { %>
            <p class="<%= idx < interests.length - 1 ? '' : 'mb-0' %>"><%= desc %></p>
            <% }) %>
        </div>
    </section>
    <hr class="m-0" />
    <% } %>
    <!-- Awards-->
    <% if (awards.length) { %>
    <section class="resume-section" id="awards">
        <div class="resume-section-content">
            <h2 class="mb-5">荣誉证书</h2>
            <ul class="fa-ul mb-0">
                <% awards.forEach((desc) => { %>
                <li>
                    <svg class="fontawesome-icon text-warning" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><!-- Font Awesome Free 5.15.4 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) --><path fill="currentColor" d="M552 64H448V24c0-13.3-10.7-24-24-24H152c-13.3 0-24 10.7-24 24v40H24C10.7 64 0 74.7 0 88v56c0 35.7 22.5 72.4 61.9 100.7 31.5 22.7 69.8 37.1 110 41.7C203.3 338.5 240 360 240 360v72h-48c-35.3 0-64 20.7-64 56v12c0 6.6 5.4 12 12 12h296c6.6 0 12-5.4 12-12v-12c0-35.3-28.7-56-64-56h-48v-72s36.7-21.5 68.1-73.6c40.3-4.6 78.6-19 110-41.7 39.3-28.3 61.9-65 61.9-100.7V88c0-13.3-10.7-24-24-24zM99.3 192.8C74.9 175.2 64 155.6 64 144v-16h64.2c1 32.6 5.8 61.2 12.8 86.2-15.1-5.2-29.2-12.4-41.7-21.4zM512 144c0 16.1-17.7 36.1-35.3 48.8-12.5 9-26.7 16.2-41.8 21.4 7-25 11.8-53.6 12.8-86.2H512v16z"/></svg>
                    <%= desc %>
                </li>
                <% }) %>
            </ul>
        </div>
    </section>
    <% } %>
</div>
<script src="/jquery/3.5.1/jquery.min.js"></script>
<script src="/bootstrap-4.5.3-dist/js/bootstrap.bundle.min.js"></script>
<script src="/jquery-easing/1.4.1/jquery.easing.min.js"></script>
<script>
    /*!
    * Start Bootstrap - Resume v6.0.2 (https://startbootstrap.com/theme/resume)
    * Copyright 2013-2020 Start Bootstrap
    * Licensed under MIT (https://github.com/StartBootstrap/startbootstrap-resume/blob/master/LICENSE)
    */
    (function ($) {
        "use strict"; // Start of use strict

        // Smooth scrolling using jQuery easing
        $('a.js-scroll-trigger[href*="#"]:not([href="#"])').click(function () {
            if (
                location.pathname.replace(/^\//, "") ==
                this.pathname.replace(/^\//, "") &&
                location.hostname == this.hostname
            ) {
                var target = $(this.hash);
                target = target.length
                    ? target
                    : $("[name=" + this.hash.slice(1) + "]");
                if (target.length) {
                    $("html, body").animate(
                        {
                            scrollTop: target.offset().top,
                        },
                        1000,
                        "easeInOutExpo"
                    );
                    return false;
                }
            }
        });

        // Closes responsive menu when a scroll trigger link is clicked
        $(".js-scroll-trigger").click(function () {
            $(".navbar-collapse").collapse("hide");
        });

        // Activate scrollspy to add active class to navbar items on scroll
        $("body").scrollspy({
            target: "#sideNav",
        });
    })(jQuery); // End of use strict
</script>
</body>
<%- include('../components/foot.ejs'); %>
